<template>
  <a-spin :spinning="loading">
    <div>
      <a-form :form="form" layout="inline">
        <a-row class="margin-bottom">

          <a-col :span="12">
            <a-form-item label="项目">
              <a-select :show-search="showSearch" placeholder="请输入项目" :filter-option="filterOption" label-in-value
                        style="width: 200px;margin-right: 20px"
                        v-decorator="['projectId',{rules:[{required:true,message:'请选择项目！'}]}]" @change="initAreaList"
                        :options="projectList">
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="楼栋">
              <a-select label-in-value :show-search="showSearch" :filter-option="filterOption" placeholder="可为空"
                        style="width: 300px;margin-right: 20px" v-decorator="['buildId',{}]" @change="initUnitList"
                        :options="buildList">
              </a-select>
            </a-form-item>
          </a-col>

        </a-row>

        <a-row class="margin-bottom">

          <a-col :span="12">
            <a-form-item label="区域">
              <a-select label-in-value :show-search="showSearch" placeholder="请输入区域" :filter-option="filterOption"
                        style="width: 200px;margin-right: 20px"
                        v-decorator="['areaId',{rules:[{required: true,message:'请选择区域'}]}]" @change="initBuildList"
                        :options="areaList">
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="10">
            <a-form-item label="单元">
              <a-select label-in-value :show-search="showSearch" :filter-option="filterOption" placeholder="可为空"
                        style="width: 300px;margin-right: 20px" v-decorator="['unitId',{}]" @change="initFloorList"
                        :options="unitList">

              </a-select>
            </a-form-item>
          </a-col>

        </a-row>

        <a-row class="margin-bottom">
          <a-col :span='12'></a-col>
          <a-col :span="12">
            <a-form-item label="楼层">
              <a-select label-in-value :show-search="showSearch" :filter-option="filterOption" placeholder="可为空"
                        style="width: 300px;margin-right: 20px" v-decorator="['floorId',{}]" @change="initHouseList"
                        :options="floorList">
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="margin-bottom">
          <a-col :span='12'></a-col>
          <a-col :span="12">
            <a-form-item label="房间号">
              <a-select label-in-value :show-search="showSearch" :filter-option="filterOption" placeholder="可为空"
                        style="width: 300px;margin-right: 20px" v-decorator="['houseId',{}]" @change="setHouseName"
                        :options="houseList">
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-button style="width:100px;    position: relative;left: 50%;transform: translateX(-50%);"
                @click="nextStep">
        下一步
      </a-button>
    </div>
  </a-spin>
</template>

<script>
import {getProjectList} from '@api/api'
import {getAction} from '@api/manage'
import FormItem from '@comp/tools/formItem'

export default {
  name: 'DeviceInfoModal',
  components: {FormItem},
  data() {
    return {
      form: this.$form.createForm(this),
      showSearch: true,
      loading: false,
      projectList: [],
      areaList: [],
      buildList: [],
      unitList: [],
      floorList: [],
      houseList:[],
      regionName: "",
      projectName: "",
      areaName: "",
      buildName: "",
      unitName: "",
      floorName: "",
      houseName: "",
      model: {},
      url: {
        add: "/device/add",
        edit: "/device/device/edit",
        getAreaInfos: '/area/getAreaList',
        getbuildInfos: '/building/getBuildList',
        getUnitInfos: '/unit/getUnitList',
        getFloorInfos: '/floor/getFloorList',
        getHouseInfos: '/house/getHouseList',
        addHouse: 'house/addHouse'
      },
      deviceAliasName: "",

    }
  },

  mounted() {
    this.initProjectList()
  },
  props: {
    modalValue: {
      type: Object
    },
  },
  methods: {
    filterOption(input, option) {
      let com = option.componentOptions
      let name = String(com.propsData.label)
      if (name.toLowerCase().includes(input.toLowerCase())) {
        return true
      }
    },
    nextStep() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let formData = Object.assign(this.model, values)
          if (formData.buildId!=undefined&& formData.buildId.key==""){
          formData.buildId=undefined
        }
        if (formData.unitId!=undefined&&formData.unitId.key==""){
          formData.unitId=undefined
        }
        if (formData.floorId!=undefined&&formData.floorId.key==""){
          formData.floorId=undefined
        }
        if (formData.houseId!=undefined&&formData.houseId.key==""){
          formData.houseId=undefined
        }
          this.form.validateFields((err, values) => {
            if(!err){
              this.deviceAliasName = values['projectId'].label +'-'+ values['areaId'].label
              if(values['buildId']!=undefined&&values['buildId'].label!=undefined&&values['buildId'].key!=""){
                this.deviceAliasName = this.deviceAliasName+'-'+ values['buildId'].label
              }
              if(values['unitId']!=undefined&&values['unitId'].label!=undefined&&values['unitId'].key!=""){
                this.deviceAliasName = this.deviceAliasName+'-'+ values['unitId'].label
              }
              if(values['floorId']!=undefined&&values['floorId'].label!=undefined&&values['floorId'].key!=""){
                this.deviceAliasName = this.deviceAliasName+'-'+ values['floorId'].label
              }
              if(values['houseId']!=undefined&&values['houseId'].label!=undefined&&values['houseId'].key!=""){
                this.deviceAliasName = this.deviceAliasName+'-'+ values['houseId'].label
              }
            }
          })
          // this.deviceAliasName = this.deviceAliasName.substring(1,this.deviceAliasName.length)
          formData.deviceAliasName = this.deviceAliasName
          this.$emit('infoChange', formData)
          this.$emit('currentChange', 1)
        }
      })

    },
   async initProjectList() {
      if (this.modalValue.id !== undefined&&this.modalValue.id !==null) {
        this.model = Object.assign({}, this.modalValue)
        this.form.resetFields()
        await this.getAreaList({projectId:this.model.projectId})
        await this.getBuildList({areaId:this.model.areaId})
        await this.getUnitList({buildingId:this.model.buildingId})
        await this.getFloorList({unitId:this.model.unitId})
        await this.getHouseList({houseId:this.model.floorId})
        this.$nextTick(() => {
          this.form.setFieldsValue({projectId: {value: this.model.projectId, label: this.model.projectName}})
          this.form.setFieldsValue({areaId: {value: this.model.areaId, label: this.model.areaName}})
          let build = this.buildList.find(item=>{if(item.key === this.model.buildingId){return true}})
          this.form.setFieldsValue({buildId: build})
          let unit = this.unitList.find(item=>{if(item.key === this.model.unitId){return true}})
          this.form.setFieldsValue({unitId: unit})
          let floor = this.floorList.find(item=>{if(item.key === this.model.floorId){return true}})
          this.form.setFieldsValue({floorId: floor})
          let house = this.houseList.find(item=>{if(item.key === this.model.houseId){return true}})
          this.form.setFieldsValue({houseId: house})
        })
      }else {
        this.form.resetFields()
      }
      getProjectList().then((res) => {
        this.projectList = []
        if (res.success) {

          if (res.result !== null) {
            res.result.forEach(item => {
              this.projectList.push({
                value: item.id,
                key: item.id,
                label: item.name
              })
            })
          }
        }
      })
    },
    initAreaList(e) {
      this.projectName = e.label
      let params = {
        projectId: e.key
      }
      this.form.resetFields(['areaId', 'buildId', 'unitId', 'floorId','houseId'])
      this.getAreaList(params)
    },
    async getAreaList(params) {
      this.loading = true
     await getAction(this.url.getAreaInfos, params).then((res) => {
        this.areaList = []
        if (res.success) {
          if (res.result !== null) {
            res.result.forEach(item => {
              this.areaList.push({
                value: item.id,
                key: item.id,
                label: item.name
              })
            })
          }

        }
       this.loading = false
      })
    },
    initBuildList(e) {
      this.areaName = e.label
      this.form.resetFields(['buildId', 'unitId', 'floorId','houseId'])
      let params = {
        areaId: e.key
      }
      this.getBuildList(params)

    },
   async getBuildList(params) {
     this.loading = true
      await getAction(this.url.getbuildInfos, params).then((res) => {
        this.buildList = [{value: "", label: "请选择楼栋"}]
        if (res.success) {
          if (res.result !== null) {
            res.result.forEach(item => {
              this.buildList.push({
                value: item.id,
                key: item.id,
                label: item.buildingName
              })
            })
          }
        }
        this.loading = false
      })
    },
    initUnitList(e) {
      this.buildName = e.label
      this.form.resetFields(['unitId', 'floorId','houseId'])
      let params = {
        buildingId: e.key
      }
      this.getUnitList(params)
    },
   async getUnitList(params) {
     if (params.buildingId!=null){
       this.loading = true
       await getAction(this.url.getUnitInfos, params).then((res) => {
         this.unitList = [{value: "", label: "请选择单元"}]
         if (res.success) {
           if (res.result !== null) {
             res.result.forEach(item => {
               this.unitList.push({
                 value: item.id,
                 key: item.id,
                 label: item.unitName
               })
             })
           }
         }
         this.loading = false
       })
     }
    },
    initFloorList(e) {
      this.unitName = e.label
      this.form.resetFields(['floorId','houseId'])
      let params = {
        unitId: e.key
      }
      this.getFloorList(params)

    },
   async getFloorList(params) {
      if (params.unitId!=null){
        this.loading = true
        await getAction(this.url.getFloorInfos, params).then((res) => {
          this.floorList = [{value: "", label: "请选择楼层"}]
          if (res.success) {
            if (res.result !== null) {
              res.result.forEach(item => {
                this.floorList.push({
                  value: item.id,
                  key: item.id,
                  label: item.floorName
                })
              })
            }
          }
          this.loading = false
        })
      }
    },
    initHouseList(e) {
      this.floorName = e.label
      this.form.resetFields(['houseId'])
      let params = {
        floorId: e.key
      }
      this.getHouseList(params)
    },
    async getHouseList(params) {
      if (params.floorId!=null){
        this.loading = true
        await getAction(this.url.getHouseInfos, params).then((res) => {
          this.houseList = [{value: "", label: "请选择房间号"}]
          if (res.success) {
            if (res.result !== null) {
              console.log("houseList",res.result)
              res.result.forEach(item => {
                this.houseList.push({
                  value: item.id,
                  key: item.id,
                  label: item.houseName
                })
              })
            }
          }
          this.loading = false
        })
      }
    },
    setHouseName(e) {
      this.houseName = e.label
    },
  }
}
</script>

<style scoped>
.margin-bottom {
  margin-bottom: 20px;
}
</style>